<!--  -->
<template>
  <div>
    <el-dialog
      title="技术原因选择"
      :visible.sync="show"
      width="1000px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div class="dialog-content" v-if="show">
            <div class="checkList">
                <div class="title">
                    设备编码：{{ causeData }}
                </div>
                <div class="tableItem">
                    <el-table
                    size="mini"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55"></el-table-column>
                    <el-table-column label="序号" type="index" show-overflow-tooltip width="50" align="center" fixed="left"></el-table-column>
                    <el-table-column label="停电技术原因" :show-overflow-tooltip="true"  prop="tdjsyy"> </el-table-column>
                    <el-table-column label="停电技术码" :show-overflow-tooltip="true"  prop="tdjsm"> </el-table-column>
                    </el-table>
                </div>
             </div>
             <div class="checkButton">
                <div class="selBtn"><el-button @click="selAction" size="mini">选 择</el-button></div>
                <div class="remBtn"><el-button @click="removeSbjsyy" size="mini">移 除</el-button></div>
             </div>
             <div class="checkedTbale">
                 <div class="title">
                    已选项
                </div>
                <div class="tableItem">
                    <el-table
                    size="mini"
                    ref="multipleTableTow"
                    :data="selectedTable"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    v-loading="listLoading"
                    @selection-change="handleSelectionChangeTow">
                    <el-table-column type="selection"  width="55"></el-table-column>
                    <el-table-column label="序号" type="index" show-overflow-tooltip width="50" align="center" fixed="left"></el-table-column>
                    <el-table-column label="停电设备码" :show-overflow-tooltip="true"  prop="tdsbm"> </el-table-column>
                    <el-table-column label="停电技术原因" :show-overflow-tooltip="true"  prop="tdjsyy"> </el-table-column>
                    <el-table-column label="停电技术码" :show-overflow-tooltip="true"  prop="tdjsm"> </el-table-column>
                    </el-table>
                </div>
             </div>
      </div>
      <span slot="footer">
        <el-button  @click="handleClose" size="small">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSbjsPage,addJsyy,deleteJsyy,jsyybm } from "../../../../api/dmgl/sbjsgl";
export default {
  props: {
    causeData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      tableData: [],
      multipleSelection: [],
      listQuery: {
        tdsbm:"",
        size:80
      },
      selectedTable:[],
      removeData:[],
      listLoading:false
    };
  },

  components: {},

  computed: {},

  watch: {
    causeData(newVal, oldVal){
      this.listQuery.tdsbm = newVal;
      this.getTableList();
    }
  },

  created() {},

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },

  update() {},

  destroyed() {},

  methods: {
    /**打开弹窗 */
    openCause() {
      this.show = true;
      this.getTableListSelted();
    },
    /**关闭弹窗 */
    handleClose() {
      this.show = false;
    },
    /**左侧列表选中的集合 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**右侧列表选中的集合 */
    handleSelectionChangeTow(val){
        this.removeData = val;
    },
    /**左侧选中集合加入右侧表格*/
    selAction(){
        if(this.multipleSelection.length<=0){
          return
        };
        let selectedData = this.selectedTable;
        let selArr = this.multipleSelection;
        /*删除重复的数据*/
        for (let index = 0; index < selectedData.length; index++) {
            for (let k = 0; k < selArr.length; k++) {
              if(selectedData[index].tdjsm == selArr[k].tdjsm){
                 selArr.splice(k,1)
              }
            }
        };
        if(selArr.length<=0){
          this.$message({type: 'info', message: '不能重复添加'});          
          return;
        };
        let query = {
          tdsbm:this.causeData,
          tdjsm:[]
        };
        let params = [];
        for (let i = 0; i < selArr.length; i++) {
            params.push(selArr[i].tdjsm)
        };
        query.tdjsm = params;
        this.$confirm('确定添加吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
        }).then(() => {
           this.listLoading = true;
           addJsyy(query).then(res => {
            if(res.code == 0){
              this.listLoading = false;
              this.$message({type: 'success',message: '添加成功!'});
              this.getTableListSelted();
              this.$refs.multipleTable.clearSelection();
            }else{
              this.listLoading = false;
              this.$message.error(res.message)
            }
          });
        }).catch(() => {
          this.$message({type: 'info',message: '已取消'});          
        });
    },
    /*左侧未选表格*/
    getTableList(){
      let params = {size:80}
      jsyybm(params).then(res => {
        if(res.code == 0){
            this.tableData = res.data.records;
        }else{
          this.$message.error(res.message)
        }
      })
    },
    /*右侧已选的表格*/
    getTableListSelted(){
        getSbjsPage(this.listQuery).then(res => {
        if(res.code == 0){
            this.selectedTable = res.data.records;
            this.$emit("handleClickRefuse", this.selectedTable);
        }else{
          this.$message.error(res.message)
        }
      })
    },
    /*移除已选原因*/
    removeSbjsyy(){
      if(this.removeData.length<=0){
        return;
      }
      let delArr = {
        tdsbm:this.causeData,
        tdjsm:[]
      };
      let params = [];
      for (let i = 0; i < this.removeData.length; i++) {
            params.push(this.removeData[i].tdjsm)
        };
      delArr.tdjsm = params;
      this.$confirm('确定删除吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
        }).then(() => {
          this.listLoading = true;
          deleteJsyy(delArr).then(res => {
            if(res.code == 0){
              this.listLoading = false;
              this.$message({type: 'success',message: '删除成功!'});
              this.getTableListSelted();
              this.$refs.multipleTableTow.clearSelection();
            }else{
              this.listLoading = false;
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除'});          
        });
    }
  },
};
</script>
<style lang='scss' scoped>
/deep/ .el-dialog__body{
    padding: 0px;
}
/deep/ .el-dialog__footer{
  padding: 10px 20px 10px;
}
/deep/ .el-dialog__header{
  padding: 10px 20px 10px;
}
/deep/ .el-dialog__headerbtn{
  top: 10px;
}
.dialog-content{
  width: 100%;
  height: 385px;
  overflow: auto;
  display: flex;
  .checkList,.checkedTbale{
    border: 1px solid #EBEEF5;
    width: 455px;
    .tableItem{
      height: 350px;
      overflow: auto;
    }
    .title{
      background: #ECF5FF;
      height: 30px;
      padding: 7px;
      color: #000;
    }
  }
  .checkButton{
    width: 90px;
    .selBtn{
        margin-top: 155px;
        text-align: center;
    }
    .remBtn{
        margin-top: 20px;
        text-align: center;
    }
  }
}
</style>